<template>
    <el-tree
            :data="dangerlist"
            show-checkbox=false
            node-key="id"
            ref="treeForm"
            highlight-current
            :props="defaultProps"
            :check-strictly="true"
            @check-change="getNode"
    ></el-tree>
</template>
<script>
    import {loadDropDown} from "../request";
    export default {
        name: 'XDTree',
        props: ['value', 'list'],
        data() {
            return {
                // dangerlist: [{
                //     id: 1,
                //     label: 'Level one 1',
                //     children: [{
                //         id: 4,
                //         label: 'Level two 1-1',
                //         children: [{
                //             id: 9,
                //             label: 'Level three 1-1-1'
                //         }, {
                //             id: 10,
                //             label: 'Level three 1-1-2'
                //         }]
                //     }]
                // }, {
                //     id: 2,
                //     label: 'Level one 2',
                //     children: [{
                //         id: 5,
                //         label: 'Level two 2-1'
                //     }, {
                //         id: 6,
                //         label: 'Level two 2-2'
                //     }]
                // }, {
                //     id: 3,
                //     label: 'Level one 3',
                //     children: [{
                //         id: 7,
                //         label: 'Level two 3-1'
                //     }, {
                //         id: 8,
                //         label: 'Level two 3-2'
                //     }]
                // }],
                dangerlist: [],
                defaultProps: {
                    children: "children",
                    label: "unitName",
                },
                lists: {
                    url: '/riskUnit/getRiskUnitTree?',
                    mineId: true,
                    data: {}
                },
                model: ""
            }
        },
        created() {
            this.lists = this.list
            this.defaultProps.label = this.list.label
            this.getList()
        },
        mounted() {
            this.$refs.treeForm.setCheckedKeys([this.value]);
            this.model = this.value
        },
        methods: {
            getList() {
                this.select = this.lists
                let requestJson = this.select
                if(requestJson.mineId) {
                    requestJson.data.mineId = this.$store.state.mineId
                }
                if(requestJson.companyId) {
                    requestJson.data.companyId = this.$store.state.companyId
                }
                loadDropDown(requestJson).then(response=>{
                    let list = response.data
                    let a = list.map(item=>({
                        children: item[this.select.label],
                        value: item[this.select.value]
                    }))
                    this.dangerlist = list
                    console.log(list)
                }).catch(error => {
                    console.log(error)
                })
            },
            changed() {
                this.$emit('input')
            },
            //选中的节点
            getNode(data, checked,child) {
                if(checked===true){
                    this.model = data.id
                    this.$refs.treeForm.setCheckedKeys([data.id]);
                }else{
                    if(this.model==data.id)
                        this.$refs.treeForm.setCheckedKeys([])
                }
                this.$emit('input', this.model)
            },
        },
        watch: {
            "value": function () {
                this.$refs.treeForm.setCheckedKeys([this.value]);
                this.model = this.value
            }
        }
    }
</script>
<style lang="scss" scoped>
    :deep(.el-tree) {
        padding-top: 15px;
        padding-left: 10px;
        .el-tree-node {
            .is-leaf + .el-checkbox .el-checkbox__inner {
                display: inline-block;
            }
            .el-checkbox .el-checkbox__inner {
                display: none;
            }
        }
    }
    :deep(.el-tree__empty-text) {
        position: initial;
    }
</style>